import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import _applyDecoratedDescriptor from "@babel/runtime/helpers/esm/applyDecoratedDescriptor";
import _forEach from "lodash/forEach";

var _dec, _class;

/**
 * 工作台 卡片设置
 * 对布局中的卡片进行新增或删除操作
 * @date 2019-01-28
 */
import React from 'react';
import { Badge, Col, Modal, Row, Spin, Tag } from 'antd';
import { Bind } from 'lodash-decorators';
import { DEBOUNCE_TIME } from "../../../utils/constants";
import intl from "../../../utils/intl";
import styles from "./index.less?modules";
var modalStyle = {
  minWidth: '120px'
};
/**
 * @ReactProps {!Function} onAddCard - 新增卡片
 * @ReactProps {!Function} removeCard - 删除卡片
 * @ReactProps {!Function} loadLayout - 加载布局 和 设置卡片 (在比对后发现 没有权限的卡片后调用)
 * @ReactProps {!Function} onCancel - 取消卡片设置状态
 * @ReactProps {!boolean} visible
 * @ReactProps {!object[]} catalogType - 卡片类型
 * @ReactProps {!object[]} roleCards - 当前拥有权限的卡片
 * @ReactProps {object[]} prevRoleCards - 之前拥有权限的卡片
 * @ReactProps {!object[]} layout - 布局中的卡片
 */

var CardsSetting = (_dec = Bind(), (_class = /*#__PURE__*/function (_React$Component) {
  _inherits(CardsSetting, _React$Component);

  var _super = _createSuper(CardsSetting);

  function CardsSetting() {
    var _this;

    _classCallCheck(this, CardsSetting);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));
    _this.state = {
      editCards: {}
    };
    _this.timer = {};
    return _this;
  }

  _createClass(CardsSetting, [{
    key: "componentDidUpdate",
    value: // 卡片 code 对应的 bounce
    function componentDidUpdate(prevProps) {
      var _this2 = this;

      var prevVisible = prevProps.visible;
      var _this$props = this.props,
          visible = _this$props.visible,
          loadAssignableCards = _this$props.loadAssignableCards;

      if (prevVisible === false && visible === true) {
        loadAssignableCards().then(function (res) {
          if (res) {
            // 由隐藏状态变为显示状态, 计算当前 卡片设置的 state
            var _this2$props = _this2.props,
                prevRoleCards = _this2$props.prevRoleCards,
                roleCards = _this2$props.roleCards,
                layout = _this2$props.layout,
                catalogType = _this2$props.catalogType,
                isInitCard = _this2$props.isInitCard;
            var editCards = {};
            catalogType.forEach(function (catalog) {
              editCards[catalog.value] = {
                cards: []
              };
            });
            roleCards.forEach(function (card) {
              // 卡片可能没有分配
              var cardId = String(card.cardId);
              var layoutCard = layout.find(function (insertCard) {
                return insertCard.i === cardId;
              });

              var editCard = _objectSpread(_objectSpread({}, card), layoutCard);

              editCard.isNew = prevRoleCards ? !prevRoleCards.some(function (prevCard) {
                return String(prevCard.cardId) === cardId;
              }) : false;
              editCard.isInsert = !!layoutCard;
              editCard.isInit = isInitCard(cardId);

              if (editCards[editCard.catalogType]) {
                // 存在卡片类型中, 否则是错误的数据(或者脏数据)
                editCards[editCard.catalogType].cards.push(editCard);
              }
            });

            _this2.setState({
              editCards: editCards
            });
          }
        });
      }
    }
  }, {
    key: "shouldComponentUpdate",
    value: function shouldComponentUpdate(nextProps) {
      var visible = nextProps.visible;
      var prevVisible = this.props.visible;

      if (visible === true) {
        return true;
      }

      if (visible === false && prevVisible === true) {
        return true;
      }

      return false;
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      _forEach(this.timer, function (timer) {
        clearTimeout(timer);
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          visible = _this$props2.visible,
          onCancel = _this$props2.onCancel,
          _this$props2$loading = _this$props2.loading,
          loading = _this$props2$loading === void 0 ? false : _this$props2$loading;
      return /*#__PURE__*/React.createElement(Modal, {
        destroyOnClose: true,
        title: /*#__PURE__*/React.createElement("span", {
          className: styles['card-setting-title']
        }, intl.get('cpaas.workplace.view.title.cardsSetting').d('卡片设置')),
        style: modalStyle,
        wrapClassName: "ant-modal-sidebar-right",
        transitionName: "move-right",
        className: styles['card-setting'],
        visible: visible,
        onCancel: onCancel,
        footer: null
      }, /*#__PURE__*/React.createElement(Spin, {
        spinning: loading
      }, this.renderCatalogTypeRow()));
    }
  }, {
    key: "renderCatalogTypeRow",
    value: function renderCatalogTypeRow() {
      var _this3 = this;

      var _this$props$catalogTy = this.props.catalogType,
          catalogType = _this$props$catalogTy === void 0 ? [] : _this$props$catalogTy;
      var editCards = this.state.editCards;
      return catalogType.map(function (catalog) {
        var rowData = editCards[catalog.value];

        if (rowData && rowData.cards.length > 0) {
          return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
            key: "title",
            className: styles['card-col-title']
          }, catalog.meaning), /*#__PURE__*/React.createElement(Row, {
            gutter: 16,
            key: catalog.value,
            className: styles['card-row'],
            type: "flex",
            justify: "start"
          }, _this3.renderCatalogTypeCols(catalog, rowData.cards)));
        }

        return null;
      });
    }
  }, {
    key: "renderCatalogTypeCols",
    value: function renderCatalogTypeCols(catalog, cards) {
      var _this4 = this;

      return cards.map(function (card) {
        return /*#__PURE__*/React.createElement(Col, {
          key: card.cardId,
          className: styles['card-col']
        }, /*#__PURE__*/React.createElement(Tag.CheckableTag, {
          key: "is-insert",
          className: styles['card-col-tag'],
          onChange: function onChange(checked) {
            return _this4.handleCardInsertChange(card, catalog, checked);
          },
          checked: card.isInsert,
          disabled: card.isInit
        }, card.name), card.isNew && /*#__PURE__*/React.createElement(Badge, {
          key: "is-new",
          dot: true
        }));
      });
    }
    /**
     * 卡片是否选中状态改变
     */

  }, {
    key: "handleCardInsertChange",
    value: function handleCardInsertChange(card, catalog, checked) {
      var editCards = this.state.editCards;
      var _editCards$catalog$va = editCards[catalog.value].cards,
          cards = _editCards$catalog$va === void 0 ? [] : _editCards$catalog$va;
      var newCards = cards.map(function (record) {
        if (record.cardId === card.cardId) {
          return _objectSpread(_objectSpread({}, record), {}, {
            isInsert: checked
          });
        }

        return record;
      });
      this.setState({
        editCards: _objectSpread(_objectSpread({}, editCards), {}, _defineProperty({}, catalog.value, {
          cards: newCards
        }))
      });
      this.changeCard(card, checked);
    }
  }, {
    key: "changeCard",
    value: function changeCard(card, isInsert) {
      var _this5 = this;

      var cardId = String(card.cardId);

      if (this.timer[cardId]) {
        clearTimeout(this.timer[cardId]);
      }

      this.timer[cardId] = setTimeout(function () {
        _this5.realChangeCard(card, isInsert);
      }, DEBOUNCE_TIME);
    }
  }, {
    key: "realChangeCard",
    value: function realChangeCard(card, isInsert) {
      var _this$props3 = this.props,
          onAddCard = _this$props3.onAddCard,
          onRemoveCard = _this$props3.onRemoveCard;
      var cardId = String(card.cardId);

      if (isInsert) {
        onAddCard(card);
      } else {
        onRemoveCard(cardId);
      }
    }
  }]);

  return CardsSetting;
}(React.Component), (_applyDecoratedDescriptor(_class.prototype, "realChangeCard", [_dec], Object.getOwnPropertyDescriptor(_class.prototype, "realChangeCard"), _class.prototype)), _class));
export { CardsSetting as default };